<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="images/blog.ico">
    <link rel="stylesheet" href="css/s-init.css">
    <link rel="stylesheet" href="css/left-com.css">
    <link rel="stylesheet" type="text/css" href="font/iconfont.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Mrs-xiao</title>
</head>
<body>
    <div id="wrap" class="width100 clearfix">
        <!-- 左边导航栏区域 -->
        <div class="left-nav fl-left">
            <!-- 左边导航栏内容区域 -->
            <div class="left-nav-content">
                <h1 class="mar-bottom55 ">
                    <a href="index1.html">MARBLE</a>
                </h1>
                <ul>
                    <li class="pad-top10">
                        <a  href="index1.html">HOME</a>
                    </li>
                    <li>
                        <a href="blog.html">BLOG</a>
                    </li>
                    <li>
                        <a href="portfolio.html">PORTFOLIO</a>
                    </li>
                    <li>
                        <a href="about.html">ABOUT</a>
                    </li>
                    <li>
                        <a href="contact.html">CONTACT</a>
                    </li>
                </ul>
            </div>
            <!-- 左边导航脚步区域 -->
            <div class="left-nav-footer ">
                <p class="ft-size12 pad-bottom8">Copyright © 2017.Company name All rights reserved.</p>
                <ul class="">
                    <li>
                        <a href="">
                            <i class="iconfont icon-Facebook"></i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="iconfont icon-gezi"></i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                             <i class=" iconfont icon-xiangji-copy"></i>    <i></i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="iconfont icon-in"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 右边主要内容区 -->
        <div class="main-content fl-right">
                <!-- 轮播 -->
            <div class="banner width100 pos-relative">
                <div class="pics height100">
                    <ul>
                        <li><img  src="images/img_bg_1.jpg" alt=""></li>
                    </ul>
                </div>
                <!-- 轮播分页器 -->
                <div class="btn pos-absolute pos-abs-right20 pos-abs-bottom20">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <!-- 轮播的一层遮罩 -->
                <div class="opacity width100 height100 pos-absolute pos-abs-left0 ">
                    <div class="opacity-content  ">
                        <p class="cf ft-size40 ">We are Happy to Create Newest Modern Websites</p>
                        <ul class="ft-size0 mar-top15">
                           <li class="ft-size12 " >
                               <a class=" active" href="">
                                   <i class="iconfont icon-PC ver-middle"></i>
                                    LIVE PREVIEW
                                </a>
                            </li>
                            <li class="ft-size12 mar-left8">
                                <a  href="">
                                    LEARN MORE
                                    <i  class="iconfont icon-jiantou12-copy ver-middle"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
             <!-- 服务部分 -->
            <div class="search ">
                <h3 class="ft-size16 mar-bottom35">SERVICES</h3>
                <div class="search-content">
                    <ul  class="ft-size0">
                        <li class="ft-size0 mar-bottom55">
                            <i class="iconfont icon-shezhiiconfontfangwen01 ver-middle"></i>
                            <div class="ver-middle mar-left15">
                                <h4 class="ft-size14">STRATEGY</h4>
                                <p class="ft-size12 mar-top15">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
                            </div>
                        </li>
                        <li class="ft-size0 mar-bottom55">
                            <i class="iconfont icon-sousuo ver-middle"></i>
                            <div class="ver-middle mar-left15">
                                <h4 class="ft-size14">EXPLORE</h4>
                                <p class="ft-size12 mar-top15">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
                            </div>
                        </li>
                        <li class="ft-size0 mar-bottom55">
                            <i class="iconfont icon-paper-airplane ver-middle"></i>
                            <div class="ver-middle mar-left15">
                                <h4 class="ft-size14">DIRECTION</h4>
                                <p class="ft-size12 mar-top15">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
                            </div>
                        </li>
                        <li class="ft-size0 mar-bottom55">
                            <i class="iconfont icon-light ver-middle "></i>
                            <div class="ver-middle mar-left15">
                                <h4 class="ft-size14">EXPERTISE</h4>
                                <p class="ft-size12 mar-top15"p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
                             </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- recent -->
            <div class="recent-blog">
                <h3 class="mar-bottom55 ft-size16">RECENT BLOG</h3>
                <ul class="clearfix">
                    <li>
                        <a href="">
                            <img src="images/blog/img-1.jpg" alt="">
                        </a>
                        <div class="text">
                            <h4 class="ft-size14 mar-bottom20">
                                <a href="">Inspirational Website</a>
                            </h4>
                            <em>by Admin /</em>
                            <em> Web Design  /</em>
                            <em> 14</em>
                            <p class="ft-size13">Design must be functional and functionality must be translated into visual aesthetics</p>
                            <a href="">
                                Read More
                                <i  class="iconfont icon-jiantou12-copy ver-text-top"></i>
                            </a>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/blog/img-2.jpg" alt="">
                        </a>
                        <div class="text">
                            <h4 class="ft-size14 mar-bottom20">
                                <a href="">Inspirational Website</a>
                            </h4>
                            <em>by Admin /</em>
                            <em> Web Design  /</em>
                            <em> 14</em>
                            <p class="ft-size13">Design must be functional and functionality must be translated into visual aesthetics</p>
                            <a href="">
                                Read More
                                <i  class="iconfont icon-jiantou12-copy ver-text-top"></i>
                            </a>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/blog/img-3.jpg" alt="">
                        </a>
                        <div class="text">
                            <h4 class="ft-size14 mar-bottom20">
                                <a href="">Inspirational Website</a>
                            </h4>
                            <em>by Admin /</em>
                            <em> Web Design  /</em>
                            <em> 14</em>
                            <p class="ft-size13">Design must be functional and functionality must be translated into visual aesthetics</p>
                            <a href="">
                                Read More
                                <i  class="iconfont icon-jiantou12-copy ver-text-top"></i>
                            </a>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/blog/img-4.jpg" alt="">
                        </a>
                        <div class="text">
                            <h4 class="ft-size14 mar-bottom20">
                                <a href="">Inspirational Website</a>
                            </h4>
                            <em>by Admin /</em>
                            <em> Web Design  /</em>
                            <em> 14</em>
                            <p class="ft-size13">Design must be functional and functionality must be translated into visual aesthetics</p>
                            <a href="">
                                Read More
                                <i  class="iconfont icon-jiantou12-copy ver-text-top"></i>
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- touch部分 -->
            <div class="touch">
                <h3 class="mar-bottom35">Get in touch</h3>
                <p class="ft-size18 mar-bottom35">Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                <a class="ft-size18" href="">learn more</a>
            </div>
        </div>
    </div>
   
</body>
</html>